<template>
    <div>
        <el-select v-model="value" :disabled="disabledValue" filterable remote-show-suffix remote :loading="loading"
            :remote-method="onSearch" placeholder="" @change="onChange">
            <el-option v-for="item in datasource" :key="item.id" :label="item.scriptName" :value="item.id" />
        </el-select>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent, onMounted, } from 'vue';
import { BaseRequest } from '/@/interfaces/BaseModel';
import { TaskScriptSearchParamModel, TaskScriptListModel } from '/@/interfaces/DataPipelineModel';
import { handleSearch, handleDetail } from '../task-script-wrap';
import MESSAGE from '/@/enums/message-enum';
import useObjectUtil from '/@/utils/objectUtil';

interface State {
    loading: boolean | false,
    value: string | undefined,
    disabledValue: boolean | false,
    datasource: TaskScriptListModel[],
    formModel: BaseRequest<TaskScriptSearchParamModel>,
}
export default defineComponent({
    name: 'TaskScriptList',
    components: {},
    props: {
        defaultValue: {
            type: String,
            default: undefined,
        },
        disabled: {
            type: Boolean,
            default: false,
        }
    },
    emits: ['onSelect'],
    setup(props, context) {
        const { defaultValue, disabled } = props;
        const state = reactive<State>({
            loading: false,
            value: defaultValue,
            disabledValue: disabled,
            datasource: [],
            formModel: {
                param: {
                    scriptName: undefined,
                },
                pageInfo: {
                    page: 1,
                    limit: 10,
                    total: 0
                }
            },
        });

        const methodMap = reactive({
            onSearch: async function (value: string) {
                if (!value) {
                    return;
                }
                state.loading = true;
                state.formModel.param.scriptName = value;
                const response = await handleSearch(state.formModel);
                const { code, data, pageInfo } = response;
                if (code === MESSAGE.OK) {
                    useObjectUtil.copyProperties(pageInfo, state.formModel.pageInfo);
                    state.datasource = data ? [...data] : [];
                }
                state.loading = false;
            },
            loadDetail: async function () {
                const response = await handleDetail(state.value as string);
                const { code, data } = response;
                if (code === MESSAGE.OK) {
                    let result: any = { ...data };
                    state.datasource = [result];
                }
            },
            onChange: function (value: string) {
                if (value) {
                    context.emit('onSelect', value);
                }
            },
            resetField: function() {
                state.value = undefined;
            },
        });
        // 挂载完成后
        onMounted(async () => {
            if (state.value) {
                methodMap.loadDetail();
            }
        });
        return {
            ...toRefs(state),
            ...toRefs(methodMap),
        };
    },
});
</script>
<style scoped lang="scss">
@import '/@/views/task-script/task-script.scss';
</style>
